<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>测试 - layui</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="layui/css/main.css">
    <style type="text/css">
        .imageViewList {
            width: 200px;
            height: 200px;
            margin: 10px;
        }

        .noteImg {
            width: 200px;
            height: 200px;
            object-fit: cover;
            margin: 10px;
        }
    </style>
</head>

<body>
<ul class="layui-nav">
    <li class="layui-nav-item">
        <a href="me.html" id="appUserName"></a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">退了</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="dashboard.html">恩爱广场<span class="layui-badge">9</span></a>
    </li>
    <li class="layui-nav-item">
        <a href="friends.html">好友列表</a>
    </li>
    <li class="layui-nav-item">
        <a href="our.html">我俩专属</a>
    </li>
    <li class="layui-nav-item layui-this">
        <a href="write.html">说点什么</a>
    </li>
    <li class="layui-nav-item">
        <a href="game.html">玩玩小游戏</a>
    </li>
</ul>
<br>
<div class="layui-container">
    <blockquote class="layui-elem-quote">今天想说点什么</blockquote>

    <div class="layui-row">
        <input type="text" class="layui-input" id="note-msg">
    </div>
    <hr class="layui-border-red">
    <div class="layui-row">
        <button type="button" class="layui-btn" id="uploadImg">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <button type="button" class="layui-btn" id="uploadNote">
            <i class="layui-icon">&#xe67c;</i>上传心情
        </button>
    </div>
    <hr class="layui-border-blue">
    <div class="layui-row" id="imageView">

    </div>
</div>



<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script src="layui/layui.js"></script>
<script src="layui/init.js"></script>
<script>
    layui.use('upload', function () {
        // 定义发送图片的数组,所有图片id最终保存到这个数组中
        var imageData = [];
        // 定义要向后台发送的json数据，保存说说
        var noteUploadVo = {};
        // 定义要上传的图片数量
        var imgWillUpload;
        var $ = layui.$
        var layer = layui.layer
        var upload = layui.upload;
        var imageView = document.getElementById("imageView")
        //执行实例
        var uploadInst = upload.render({
            elem: '#uploadImg' //绑定元素
            ,
            url: 'http://localhost/note/image/save' //上传接口
            ,
            headers: {
                token: localStorage.getItem('userToken')
            },
            acceptMime: 'image/*',
            auto: false,
            bindAction: '#uploadNote',
            multiple: true,
            number: 9,
            size: 0,
            choose: function (obj) {
                //将每次选择的文件追加到文件队列
                var files = obj.pushFile();

                //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                obj.preview(function (index, file, result) {
                    console.log(index); //得到文件索引
                    console.log(file); //得到文件对象
                    var img = document.createElement("img")
                    img.src = result
                    img.className = "noteImg"
                    img.id = "noteImgUpload"
                    imageView.appendChild(img)
                    //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
                    // delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                });
            },
            done: function (res) {
                //上传完毕回调
                var resJson = JSON.stringify(res)
                var resObj = JSON.parse(resJson)
                imageData.push(resObj.fileId)
                if (imageData.length == imgWillUpload) {
                    sendNote()
                }
            },
            error: function () {
                //请求异常回调
            }
        });
        $(function () {
            $("#uploadNote").on('click', function (event) {
                console.log('点了')
                imgWillUpload = $('[id=noteImgUpload]').length;
                console.log(imgWillUpload)
            })
        })

        function sendNote() {
            console.log(imageData)
            noteUploadVo.userId = localStorage.getItem('userId');
            noteUploadVo.userName = localStorage.getItem('userName');
            noteUploadVo.noteMsg = $("#note-msg").val();
            noteUploadVo.fileIds = imageData;
            console.log(noteUploadVo)
            $.ajax({
                type: "POST",
                url: "/note/save",
                headers: {
                    token: localStorage.getItem('userToken')
                },
                data: JSON.stringify(noteUploadVo),
                contentType: "application/json;charset=UTF-8",
                dataType: 'json',
                success: function (data) {
                    console.log(data)
                    window.location.replace("http://localhost/dashboard.html");
                }
            });
        }
    });
</script>
</body>

</html>